<script setup lang="ts">
import { onMounted, ref } from 'vue';
import top from './components/top/index.vue'
import tourist from './components/tourist/index.vue'
import sex from './components/sex/index.vue'
import age from './components/age/index.vue'
//获取dom
const screen=ref()
const getScale=(w=1920,h=1080)=>{
    const ww=window.innerWidth / w
    const wh=window.innerHeight /h
    return ww< wh ? ww:wh
}
//监听变化
window.onresize=()=>{
     screen.value.style.transform=`scale(${getScale()}) translate(-50%,-50%)`
}

onMounted(()=>{
    screen.value.style.transform=`scale(${getScale()}) translate(-50%,-50%)`
})
</script>

<template>
    <div class="container">
        <!-- 数据大屏展示内容区域 -->
        <div class="screen" ref="screen">
            <!-- 数据大屏顶部 -->
            <div class="top">
                <top/>
            </div>
            <div class="bottom">
                <div class="left">
                    <tourist class="tourist"/>
                    <sex class="sex"/>
                    <age class="age"/>
                </div>
                <div class="center">中间</div>
                <div class="right">右侧</div>
            </div>
        </div>
    </div>
</template>

<style scoped lang="scss">
.container{
    width: 100vw;
    height: 100vh;
    background: url(./images//bg.png) no-repeat;
    background-size: cover;
    .screen{
        position: fixed;
        width: 1920px;
        height: 1080px;
        left: 50%;
        top:50%;
        transform-origin: left top;
        .top{
            width: 100%;
            height: 40px;
        }
        .bottom{
            display: flex;
            .left{
                display: flex;
                flex-direction: column;
                flex:1;
                height: 1040px;
                .tourist{
                    flex:1.3;
                }
                .sex{
                    flex:1
                }
                .age{
                    flex:1
                }
            }
            .right{
                flex: 1;
            }
            .center{
                flex: 2;
            }
        }
    }
}
</style>